import { defineComponent } from "vue";
import "./css/submenu.scss";

export default defineComponent({
	name: "SubMenu",
	setup() {
		return () => (
			<section aria-label="Dashboard submenu block">
				<div class="submenu-controls">
					<form aria-label="Template variables" class="css-smdhoq">
						<div class="submenu-item gf-form-inline" data-testid="data-testid template variable">
							<div class="gf-form">
								<label
									class="gf-form-label gf-form-label--variable"
									data-testid="data-testid Dashboard template variables submenu Label 主机名"
									for="hostname"
								>
									主机名
								</label>
								<div class="variable-link-wrapper">
									<button
										class="css-mddp8"
										data-testid="data-testid Dashboard template variables Variable Value DropDown value link text walle云"
										aria-expanded="false"
										aria-controls="options-hostname"
										id="hostname"
										title="walle云"
									>
										<span class="css-5t1gy9">walle云</span>
										<div class="css-1vzus6i-Icon" aria-hidden="true">
											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" class="css-sr6nr">
												<path d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"></path>
											</svg>
										</div>
									</button>
								</div>
							</div>
						</div>
						<div class="submenu-item gf-form-inline" data-testid="data-testid template variable">
							<div class="gf-form">
								<label
									class="gf-form-label gf-form-label--variable"
									data-testid="data-testid Dashboard template variables submenu Label Instance"
									for="node"
								>
									Instance
								</label>
								<div class="variable-link-wrapper">
									<button
										class="css-mddp8"
										data-testid="data-testid Dashboard template variables Variable Value DropDown value link text None"
										aria-expanded="false"
										aria-controls="options-node"
										id="node"
										title="None"
									>
										<span class="css-5t1gy9">None</span>
										<div class="css-1vzus6i-Icon" aria-hidden="true">
											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" class="css-sr6nr">
												<path d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"></path>
											</svg>
										</div>
									</button>
								</div>
							</div>
						</div>
						<div class="submenu-item gf-form-inline" data-testid="data-testid template variable">
							<div class="gf-form">
								<label
									class="gf-form-label gf-form-label--variable"
									data-testid="data-testid Dashboard template variables submenu Label 时间间隔"
									for="interval"
								>
									时间间隔
								</label>
								<div class="variable-link-wrapper">
									<button
										class="css-mddp8"
										data-testid="data-testid Dashboard template variables Variable Value DropDown value link text 2m"
										aria-expanded="false"
										aria-controls="options-interval"
										id="interval"
										title="2m"
									>
										<span class="css-5t1gy9">2m</span>
										<div class="css-1vzus6i-Icon" aria-hidden="true">
											<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" class="css-sr6nr">
												<path d="M17,9.17a1,1,0,0,0-1.41,0L12,12.71,8.46,9.17a1,1,0,0,0-1.41,0,1,1,0,0,0,0,1.42l4.24,4.24a1,1,0,0,0,1.42,0L17,10.59A1,1,0,0,0,17,9.17Z"></path>
											</svg>
										</div>
									</button>
								</div>
							</div>
						</div>
					</form>
					<div class="gf-form gf-form--grow"></div>
					<div class="gf-form" data-testid="data-testid Dashboard link container">
						<a
							class="gf-form-label gf-form-label--dashlink"
							href="https://grafana.com/dashboards/8919"
							target="_blank"
							rel="noreferrer"
							data-testid="data-testid Dashboard link"
						>
							<div class="css-1vzus6i-Icon" aria-hidden="true">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 24 24"
									width="16"
									height="16"
									class="css-sr6nr"
									style="margin-right: 4px;"
								>
									<path d="M19.87,8.6A1,1,0,0,0,19,8H14.42l1.27-4.74a1,1,0,0,0-.17-.87A1,1,0,0,0,14.73,2h-7a1,1,0,0,0-1,.74l-2.68,10a1,1,0,0,0,.17.87,1,1,0,0,0,.8.39H8.89L7.08,20.74a1,1,0,0,0,1.71.93l10.9-12A1,1,0,0,0,19.87,8.6Zm-9.79,8.68,1.07-4a1,1,0,0,0-.17-.87,1,1,0,0,0-.79-.39H6.35L8.49,4h4.93L12.15,8.74a1,1,0,0,0,1,1.26h3.57Z"></path>
								</svg>
							</div>
							<span>Update</span>
						</a>
					</div>
					<div class="gf-form" data-testid="data-testid Dashboard link container">
						<a
							class="gf-form-label gf-form-label--dashlink"
							href="https://github.com/starsliao"
							target="_blank"
							rel="noreferrer"
							data-testid="data-testid Dashboard link"
						>
							<div class="css-1vzus6i-Icon" aria-hidden="true">
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 24 24"
									width="16"
									height="16"
									class="css-sr6nr"
									style="margin-right: 4px;"
								>
									<path d="M11.29,15.29a1.58,1.58,0,0,0-.12.15.76.76,0,0,0-.09.18.64.64,0,0,0-.06.18,1.36,1.36,0,0,0,0,.2.84.84,0,0,0,.08.38.9.9,0,0,0,.54.54.94.94,0,0,0,.76,0,.9.9,0,0,0,.54-.54A1,1,0,0,0,13,16a1,1,0,0,0-.29-.71A1,1,0,0,0,11.29,15.29ZM12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20ZM12,7A3,3,0,0,0,9.4,8.5a1,1,0,1,0,1.73,1A1,1,0,0,1,12,9a1,1,0,0,1,0,2,1,1,0,0,0-1,1v1a1,1,0,0,0,2,0v-.18A3,3,0,0,0,12,7Z"></path>
								</svg>
							</div>
							<span>GitHub</span>
						</a>
					</div>
					<div data-testid="data-testid Dashboard link dropdown" class="gf-form">
						<button
							class="toolbar-button gf-form-label gf-form-label--dashlink css-11bswwi-toolbar-button"
							aria-expanded="false"
							data-placement="bottom"
							data-toggle="dropdown"
							aria-controls="dropdown-list"
							aria-haspopup="menu"
						>
							<div class="css-1hos3qg">
								<div class="css-1vzus6i-Icon" aria-hidden="true">
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 24 24"
										width="16"
										height="16"
										class="css-sr6nr"
										style="margin-right: 4px;"
									>
										<path d="M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z"></path>
									</svg>
								</div>
								<span></span>
							</div>
						</button>
						<ul id="dropdown-list" class="dropdown-menu invisible" role="menu">
							<li role="none">
								<a
									role="menuitem"
									href="/d/64nrElFmk/docker-prometheus-monitoring"
									target="_blank"
									rel="noreferrer"
									data-testid="data-testid Dashboard link"
									aria-label="Docker Prometheus Monitoring dashboard"
								>
									Docker Prometheus Monitoring
								</a>
							</li>
						</ul>
					</div>
					<div class="clearfix"></div>
				</div>
			</section>
		);
	}
});
